<template>
  <div class="Playlist">
    <div v-if="!isRecommendSong" class="Playlist-header flex">
      <div class="image"><img :src="coverImgUrl" alt="" /></div>
      <div class="content">
        <div class="flex">
          <span>{{ playlistType }}</span>
          <h2>{{ playlistName }}</h2>
        </div>
        <div>
          <ul class="flex">
            <li><img :src="avatar" alt="" /></li>
            <li>{{ authorName }}</li>
            <li><span>{{ createTimes }}</span>创建</li>
          </ul>
        </div>
        <div class="iconfont">
          <button>&#xea82; 播放全部 &#xeb78;</button>
          <button>&#xe61c; 收藏(<span>{{ bookedCounts }}</span>)</button>
          <button>&#xe502; 分享(<span>{{ shareCount }}</span>)</button>
          <button>&#xe61d; 下载全部</button>
        </div>
        <p>标签：<span>欧美</span>/<span>运动</span>/<span>古典</span></p>
        <p>
          歌曲：<span>{{ songs.length }}</span> 播放：<span>{{ playCounts }}</span>
        </p>
        <p class="description">简介：<span>{{ description }}</span></p>
      </div>
    </div>
    <div v-if="isRecommendSong">

    </div>
    <div class="Playlist-body">
      <div class="flex">
        <h3 class="active">歌曲列表</h3>
        <h3>评论(<span>{{ commentCount }}</span>)</h3>
        <h3>收藏者</h3>
      </div>
      <div class="active">
        <header>
          <span>操作</span>
          <span>标题</span>
          <span>歌手</span>
          <span>专辑</span>
          <span>时间</span>
        </header>
        <div
          class="iconfont flex"
          v-for="(item, index) in songs"
          :key="item.id"
          @dblclick="playSong(item.id)"
        >
          <span>{{ index + 1 }}</span>
          <span>&#xe604;</span>
          <span>&#xe856;</span>
          <span>{{ item.name }}</span>
          <span>{{ item.ar[0].name }}</span>
          <span>{{ item.al.name }}</span>
          <span>03:05</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSongData, playSong } from "./methods";

export default {
  name: "Playlist",
  data() {
    return {
      coverImgUrl:'',
      avatar:'',
      playlistName:'',
      bookedCount:'',
      shareCount:'',
      playCount:'',
      description:'',
      commentCount:'',
      songs: [],
      createTime:'',
      playlistType:'',
      authorName:'',
    };
  },
  computed: {
    bookedCounts(){
      if(this.bookedCount>=10000) return parseInt(this.bookedCount / 10000) +'万'
      else return this.bookedCount
    },
    playCounts(){
      if(this.playCount>=10000) return parseInt(this.playCount / 10000) +'万'
      else return this.playCount
      
    },
    createTimes(){ 
        const date = new Date(Number(this.createTime))
        const YYYY = date.getFullYear()
        const MM = date.getMonth() + 1
        const DD = date.getDate()
        return `${YYYY}-${MM}-${DD}`
    },
    isRecommendSong(){
        return JSON.parse(localStorage.getItem('isRecommendSong'))
    }
  },
  methods: { getSongData, playSong },
  created() {
    if (this.$store.state.playlistData.playlistData.length !== 0) {
      this.getSongData(this.$store.state.playlistData.playlistData);
      console.log(this.$store.state.playlistData.playlistData);
    }
    if (this.$store.state.recommendSongs.recommendSongs.length !== 0) {
      this.songs = this.$store.state.recommendSongs.recommendSongs;
    }
    this.songs = JSON.parse(localStorage.getItem("songs"));
    this.coverImgUrl = JSON.parse(localStorage.album).coverImgUrl;
    this.playlistName = JSON.parse(localStorage.album).name;
    this.createTime = JSON.parse(localStorage.album).publishTime;
    this.playlistType = JSON.parse(localStorage.album).type;
    this.description = JSON.parse(localStorage.album).description;
    this.avatar = JSON.parse(localStorage.album).artist.picUrl;
    this.authorName = JSON.parse(localStorage.album).artist.name;
    
    this.playCount = JSON.parse(localStorage.playlistCount).subCount;
    this.commentCount = JSON.parse(localStorage.playlistCount).commentCount;
    this.shareCount = JSON.parse(localStorage.playlistCount).shareCount;
    this.bookedCount = JSON.parse(localStorage.playlistCount).likedCount;



  },
};
</script>

<style lang="scss" scoped>
@import "./Playlist.scss";
</style>